<template>
  <div>
    <n-grid :x-gap="24">
      <n-gi span='6'>
        <n-card :bordered="false">
          <n-thing
            v-for='item in settingType'
            :key='item.key'
            class='setting-type'
            :class="{'setting-type-active' : type === item.key}"
            @click='switchType(item)'
          >
            <template #header>{{ item.name }}</template>
            <template #description>{{ item.description }}</template>
          </n-thing>
        </n-card>
      </n-gi>

      <n-gi span='18'>
        <n-card :bordered="false" :title='typeTitle'>
          <basic-setting v-if='type==1' />
          <safety-setting v-if='type==2' />
        </n-card>
      </n-gi>
    </n-grid>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import BasicSetting from './BasicSetting.vue'
  import SafetySetting from './SafetySetting.vue'

  const settingType = [
    {
      name: '基本设置',
      description: '账户基本信息设置',
      key: 1
    }, {
      name: '安全设置',
      description: '密码等设置',
      key: 2
    }
  ]

  // 当前选择的设置页
  const type = ref(1)
  const typeTitle = ref('基本设置')

  function switchType(item: any) {
    type.value = item.key
    typeTitle.value = item.name
  }

</script>


<style lang='stylus' scoped>
  .setting-type
    padding 5px 15px
    &:hover 
      background #f3f3f3
      cursor pointer
    

  .setting-type-active 
    background #f0faff
    color #2d8cf0
    ::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) 
      color #2d8cf0
    
</style>
